<template>
<div class="container">
    <button class="Btn">
  
  <div class="sign"><svg t="1733904587066" class="icon" viewBox="0 0 1024 1024"><path d="M512.625752 61.5928c-247.332085 0-447.833585 200.502523-447.833585 447.833585 0 247.331062 200.502523 447.832562 447.833585 447.832562 247.331062 0 447.832562-200.5015 447.832562-447.832562S759.956813 61.5928 512.625752 61.5928zM568.205605 786.780227l-102.777805 0.311085-0.684592-226.111784-226.111784 0.684592-0.312108-102.777805 226.112808-0.684592-0.684592-226.111784 102.777805-0.311085 0.684592 226.111784 226.113831-0.684592 0.311085 102.778828-226.111784 0.683569L568.205605 786.780227z" fill="#ffffff" p-id="4281"></path></svg></div>
  
  <div class="text">添加种类</div>
</button>
</div>
</template>
<style scoped>
.container {
    width: 150px;
    display: flex;
    justify-content: center;
}
.Btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 45px;
  height: 45px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition-duration: .3s;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
  background-color: #409EFF;
}

/* plus sign */
.sign {
  width: 100%;
  transition-duration: .3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sign svg {
  width: 17px;
}

.sign svg path {
  fill: white;
}
/* text */
.text {
  position: absolute;
  right: 0%;
  width: 0%;
  opacity: 0;
  color: white;
  font-size: 1em;
  font-weight: 600;
  transition-duration: .3s;
}
/* hover effect on button width */
.Btn:hover {
  width: 125px;
  border-radius: 40px;
  transition-duration: .3s;
}

.Btn:hover .sign {
  width: 0%;
  transition-duration: .3s;
  padding-left: 20px;
}
/* hover effect button's text */
.Btn:hover .text {
  opacity: 1;
  width: 100%;
  transition-duration: .3s;
}
/* button click effect*/
.Btn:active {
  transform: translate(2px ,2px);
}
</style>